<template>
  <div style="text-align: center;margin: auto">
    <el-button class="button1" style="border-color: #4CAF50" >Green</el-button>
  </div>

</template>
<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Test",
}

</script>
<style>
.button1 {
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  padding: 16px 32px;
  text-align: center;
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
  border-radius: 5px;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
}

</style>
